<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>核心组件：嵌套路由</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <style>

    </style>
</head>
<body>
<div id="app">

    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/home">Home</router-link>
        <router-link to="/about">About</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<template id="home">
    <div>
        <h2>Home</h2>
        <!--home层增加路由-->
        <router-link to="/home/news">news</router-link>
        <router-link to="/home/message">message</router-link>

        <router-view></router-view>
    </div>

</template>

<template id="news">
    <ul>
        <li>News 01</li>
        <li>News 02</li>
        <li>News 03</li>
    </ul>
</template>

<template id="message">
    <ul>
        <li>Message 01</li>
        <li>Message 02</li>
        <li>Message 03</li>
    </ul>
</template>
<script>

    // 定义组件
    const Home ={template: "#home"};
    const About ={template: "<div style='color: crimson;font-weight: bold;'>Aount</div>"};

    //定义子路由
    const News={template: "#news"};
    const  Message={template: "#message"};
    //把组件放到路由里
    const routes=[
        {path:"/home",component:Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message
                }
            ]
        },
        {path:"/about",component:About}
    ];
   //定义路由对象，把上面的内容-路径传入路由对象
    const router=new VueRouter({
        routes
    });
    //启动vue

    const app= new Vue({
        router
    }).$mount("#app")
</script>
</body>
</html>
